<template>
	<scroll-view scroll-y class="my-page">
		<view class="user-info">
			<view class="user-header">
				<image class="avatar" src="/static/my/user-avatar.png" />
				<view class="user-details">
					<text class="user-name">陈思远</text>
					<text class="user-type">充电会员 · 黄金用户</text>
				</view>
			</view>
			<!-- 数据展示区域 -->
			<view class="user-stats">
				<view class="stats-item" v-for="item in stats" :key="item.id">
					<text class="stats-value">{{ item.value }}</text>
					<text class="stats-label">{{ item.label }}</text>
				</view>
			</view>
		</view>


		<!-- 功能列表：分块展示 -->
		<view class="function-block" v-for="block in functionBlocks" :key="block.id">
			<view class="function-item" v-for="item in block.items" :key="item.id">
				<view class="function-left">
					<image :src="item.icon" class="function-icon" />
					<text class="function-text">{{ item.name }}</text>
				</view>
				<view class="function-right">
					<text class="arrow">></text>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';

	// 数据展示区域数据
	const stats = ref([
		{ id: 1, label: '积分', value: '2,356' },
		{ id: 2, label: '优惠券', value: '12' },
		{ id: 3, label: '充电次数', value: '486' },
		{ id: 4, label: '余额', value: '¥258' },
	]);

	// 功能列表数据
	const functionBlocks = ref([
		{
			id: 1,
			items: [
				{ id: 1, name: '我的订单', icon: '/static/my/order.png' },
				{ id: 2, name: '充电记录', icon: '/static/my/charge-history.png' },
			],
		},
		{
			id: 2,
			items: [
				{ id: 3, name: '电子钱包', icon: '/static/my/wallet.png' },
				{ id: 4, name: '优惠券', icon: '/static/my/coupon.png' },
				{ id: 5, name: '积分商城', icon: '/static/my/points-mall.png' },
			],
		},
		{
			id: 3,
			items: [
				{ id: 6, name: '帮助中心', icon: '/static/my/help.png' },
				{ id: 7, name: '设置', icon: '/static/my/settings.png' },
			],
		},
	]);
</script>
<style scoped>
	/* 页面背景 */
	.my-page {
		background-color: #f8f9fa;
		height: 100vh;
	}

	/* 用户信息区域 */
	.user-info {
		padding: 40rpx 20rpx;
		background-image: url('https://shop-ce.oss-cn-beijing.aliyuncs.com/my/back.png');
		background-size: cover;
		background-position: center;
		color: #fff;
	}

	/* 用户信息头部 */
	.user-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 4rpx solid #fff;
		margin-right: 20rpx;
	}

	.user-details {
		color: #fff;
	}

	.user-name {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.user-type {
		font-size: 24rpx;
		opacity: 0.8;
	}

	/* 数据展示区域 */
	.user-stats {
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 20rpx;
	}

	.stats-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stats-value {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}

	.stats-label {
		font-size: 24rpx;
		color: #e0e0e0;
		margin-top: 8rpx;
	}

	/* 功能列表分块样式 */
	.function-block {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		padding-bottom: 10rpx;
	}

	/* 功能项样式 */
	.function-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.function-item:last-child {
		border-bottom: none;
	}

	.function-left {
		display: flex;
		align-items: center;
	}

	.function-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.function-text {
		font-size: 28rpx;
		color: #333;
	}

	.arrow {
		font-size: 28rpx;
		color: #999;
	}
</style>